<template>
    <div class="input-container">
        <label class="input-label">{{ label }}</label>
        <el-input class="input-content" v-model="inputValue" :placeholder="props.desc" readonly />
        <el-button type="primary" @click="onClickImage">打开图像</el-button>

        <!-- 添加全屏对话框 -->
        <el-dialog v-model="dialogVisible" fullscreen :show-close="false" :modal="false"
            custom-class="fullscreen-dialog" @keydown="handleKeyDown">
            <!-- 添加提示信息 -->
            <el-alert type="info" :closable="true" center v-if="showAlert" @close="showAlert = false" class="alert-tip">
                <template #title>
                    <div>鼠标点击选择矩形框范围</div>
                    <div>S键高亮矩形框选择调整位置</div>
                </template>
            </el-alert>
            <div class="image-region">
                <ImageRegion :_region_id="`bboxesInput`" :_readonly="false" :_toolbar="`none`" :_sync_ops="false"
                    :_show_name="true" :_highlight="false" ref="image_region" />
            </div>
            <el-button class="confirm-btn" type="danger" @click="onConfirm">
                确定
            </el-button>
            <el-button class="close-btn" type="info" circle @click="dialogVisible = false">
                <el-icon>
                    <CloseBold />
                </el-icon>
            </el-button>
        </el-dialog>
    </div>
</template>

<script setup>
import { computed, ref, getCurrentInstance, nextTick, onMounted } from 'vue';
import ImageRegion from '@/components/ToolPages/ImageRegion.vue';
import BBoxesInput from './BBoxesInput';
const { proxy } = getCurrentInstance();
import { CloseBold } from '@element-plus/icons-vue'

const props = defineProps({
    label: String,
    desc: String,
    rawdata: Array,
    modelValue: String,
});

const emit = defineEmits(['update:modelValue']);
const dialogVisible = ref(false);

// 定义存储图像编辑的对象
let _input_result = null;
const showAlert = ref(true);

// 使用计算属性实现双向绑定
const inputValue = computed({
    get() {
        return props.modelValue;
    },
    set(value) {
        emit('update:modelValue', value);
    },
});

const onClickImage = async () => {
    console.log('Open Image', props.rawdata);
    if (props.rawdata && props.rawdata.length > 0) {
        let image_url = props.rawdata[0];
        if (typeof image_url === 'string' && image_url.startsWith('file://')) {
            image_url = image_url.slice(7);
        }
        dialogVisible.value = true;
        await nextTick();

        // 读取输入框的值并解析为points数组
        let bboxes = [];
        try {
            bboxes = JSON.parse(inputValue.value);
        } catch (error) { }

        // 启动对话框后，构建一个新的input_result对象
        _input_result = new BBoxesInput(bboxes);
        proxy.$refs.image_region.loadData({
            image_url: image_url,
            input_result: _input_result
        });
    } else {
        console.warn('没有可用的图像数据');
    }
};

const handleKeyDown = (event) => {
    // console.log('PointsInput handleKeyDown event = ', event.key);
    let key = event.key.toLowerCase();
    if (key === 'delete' || key === 'backspace') {
        console.log('delete');
        _input_result && _input_result.deleteSelection();
    }
};

const onConfirm = () => {
    // console.log('onConfirm _input_result = ', _input_result);
    if (_input_result) {
        // 在这里获取编辑后的结果
        let bboxes = _input_result.getBBoxes();
        // 将bboxes转换为[[left, top, width, height], ...]格式
        let formattedBBoxes = bboxes.map(bbox => [bbox.left, bbox.top, bbox.width, bbox.height]);
        // 更新输入框的值
        inputValue.value = JSON.stringify(formattedBBoxes);
        // 关闭对话框
        dialogVisible.value = false;
    }
};

onMounted(() => {
    setTimeout(() => {
        showAlert.value = false;
    }, 5000);
});

</script>

<style scoped>
.input-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.input-label {
    width: 120px;
    font-weight: bold;
}

.input-content {
    flex: 1;
    margin-right: 3px;
}

:deep(.el-dialog) {
    padding: 0px;
}

:deep(.el-dialog__header) {
    display: none;
}

:deep(.el-dialog__body) {
    width: 100%;
    height: 100%;
}

.image-region {
    width: 100%;
    height: 100%;
}

.confirm-btn {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 1000;
}

.close-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1000;
}


.alert-tip {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
    padding: 0 50px;
    background-color: rgba(0, 0, 0, 0.7);
    width: 300px;
    color: white;
    white-space: nowrap;
    text-align: center;
}

.alert-tip :deep(.el-alert__title) {
    white-space: normal;
}
</style>